<template>
  <div class="container">
    <div class="app-container">
      <el-button class="btn-add" size="mini" type="primary" @click="showDialog=true">添加权限</el-button>
      <el-table default-expand-all :data="list" row-key="id">
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="code" label="标识" />
        <el-table-column prop="description" label="描述" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button v-if="row.type===1" size="mini" type="text" @click="addSonJurisdiction(row.id)">添加</el-button>
            <el-button size="mini" type="text" @click="editJurisdiction(row.id)">编辑</el-button>
            <el-button size="mini" type="text" @click="delJurisdiction(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增权限点弹层 -->
    <el-dialog :title="!jurisdictionForm.id?'新增权限点':'编辑权限点'" width="500px" :visible.sync="showDialog">
      <el-form ref="form" label-width="120px" :model="jurisdictionForm" :rules="rules">
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="jurisdictionForm.name" style="width:300px" size="mini" />
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="jurisdictionForm.code" style="width:300px" size="mini" />
        </el-form-item>
        <el-form-item label="权限描述" prop="description">
          <el-input v-model="jurisdictionForm.description" style="width:300px" size="mini" />
        </el-form-item>
        <el-form-item label="启用">
          <el-switch v-model="jurisdictionForm.enVisible" size="mini" active-value="1" inactive-value="0" />
        </el-form-item>
        <el-form-item>
          <el-row type="flex" justify="center">
            <el-col :span="12">
              <el-button
                type="primary"
                size="mini"
                @click="onJurisdictionSubmit"
              >确定</el-button>
              <el-button
                size="mini"
                @click="showDialog = false"
              >取消</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { addJurisdictionAPI, delJurisdictionAPI, editJurisdictionAPI, getJurisdictionParticularsAPI, getPermissionListAPI } from '@/api/permission'
import { list2Tree } from '@/utils'
export default {
  name: 'Permission',
  data() {
    return {
      // 权限点列表
      list: [],
      // 新增权限点弹层显示隐藏
      showDialog: false,
      // 权限弹层表单
      jurisdictionForm: {
        name: '',
        code: '',
        description: '',
        type: 0,
        pid: 0,
        enVisible: null,
        id: null
      },
      // 校验规则
      rules: {
        // 名称
        name: [
          { required: true, message: '权限名称不能为空', trigger: 'blur' }
        ],
        // 标识
        code: [{
          required: true, message: '权限标识不能为空', trigger: 'blur'
        }],
        // 描述
        description: [
          { required: true, message: '权限描述不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  // 侦听器
  watch: {
    // 弹层关闭时重置表单数据
    showDialog(newValue, oldValue) {
      if (!newValue) {
        this.$refs.form.resetFields()
        this.jurisdictionForm = {
          name: '',
          code: '',
          description: '',
          type: 0,
          pid: 0,
          enVisible: null,
          id: null
        }
      }
    }
  },
  async created() {
    // 调用渲染权限点列表函数
    this.getPermissionList()
  },
  methods: {
    // 封装渲染权限点列表函数
    async getPermissionList() {
      this.list = list2Tree(await getPermissionListAPI(), 0)
    },
    // 添加子权限添加按钮
    addSonJurisdiction(id) {
      this.jurisdictionForm.pid = id
      this.showDialog = true
    },
    // 删除按钮
    delJurisdiction(id) {
      this.open(id)
    },
    // 编辑按钮
    async editJurisdiction(id) {
      this.jurisdictionForm = await getJurisdictionParticularsAPI(id)
      this.showDialog = true
    },
    // 添加权限点弹层确认按钮
    async onJurisdictionSubmit() {
      await this.$refs.form.validate()
      // 有父节点id就是就是加子节点 无是加父节点
      !this.jurisdictionForm.pid
        ? this.jurisdictionForm.type = 1
        : this.jurisdictionForm.type = 2
      !this.jurisdictionForm.id
        ? await addJurisdictionAPI(this.jurisdictionForm)
        : await editJurisdictionAPI(this.jurisdictionForm)
      this.showDialog = false
      this.getPermissionList()
      this.$message.success('更新成功')
    },
    // 引入elm删除弹框
    open(id) {
      this.$confirm('是否删除该部门', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await delJurisdictionAPI(id)
          this.getPermissionList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除'
          })
        })
    }
  }

}
</script>
<style>
.btn-add {
  margin: 10px;
}
</style>
